<template>
	<div class="carts">
		<div class="main-wrap">
			<h1 class="title">我的购物车</h1>
			<!-- 购物商品列表 -->
			<div v-if="goods.length > 0">
				<el-table
					ref="mylist"
					:data="goods"
					tooltip-effect="dark"
					style="width: 100%"
					@selection-change="handleSelectionChange"
				>
					<el-table-column type="selection" width="60"> </el-table-column>
					<el-table-column label="图片" width="180">
						<!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
						<template slot-scope="scope">
							<img :src="scope.row.imageUrl" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="title" label="标题" width="400">
					</el-table-column>
					<el-table-column label="价格/数量" width="300">
						<template slot-scope="scope">
							<div class="price">&yen;{{ scope.row.priceStr }}</div>
							<div class="counter">
								<i class="el-icon-remove" @click="handelSub(scope.row.Id)"></i>
								<el-input v-model="scope.row.count"></el-input>
								<i
									class="el-icon-circle-plus"
									@click="handelAdd(scope.row.Id)"
								></i>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button
								type="info"
								icon="el-icon-delete"
								circle
								@click="handelDel(scope.row.Id)"
							></el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 空列表提示 -->
			<div class="tips" v-else>
				<h1>购物车空空~~</h1>
				<router-link to="/">去买</router-link>
			</div>
		</div>

		<!-- 购物车结算 -->
		<div class="pay-wrap">
			<div class="main-wrap">
				<div class="check-all">
					<el-checkbox
						:indeterminate="isIndeterminate"
						v-model="checkedAll"
						@change="toggleSelection(goods)"
					>
						全选
					</el-checkbox>
				</div>
				<div class="total-price">&yen;{{ totalPrice }}</div>
				<div class="btn">
					<el-button type="danger" icon="el-icon-sell" @click="handelPay"
						>结算</el-button
					>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// 数据请求
import { postAdd, getCarts, postDel, postSub } from "@/api";
// import { getCarts } from "@/api";
import { mapState } from "vuex";
export default {
	name: "CartPage",
	data() {
		return {
			checkedAll: false, //全选按钮
			goods: [], //商品列表
			isIndeterminate: false, //全选或者全不选的时候为false,部分选中为true
			checkedGoods: [], //被选中的商品列表
		};
	},
	computed: {
		...mapState(["token", "cartChecked"]),
		totalPrice() {
			// 被选中商品的价格之和
			let priceNum = 0;
			this.checkedGoods.forEach((good) => {
				priceNum += good.priceStr * good.count;
			});
			return priceNum;
		},
	},
	created() {
		// 实例创建时请求购物车商品列表
		this.getCarts();
	},
	methods: {
		// 映射方法
		// ...mapMutations(["changCartChecked"]),
		// 选择状态发生改变的时候
		handleSelectionChange(val) {
			// console.log("选择状态发生改变的时候");
			// console.log(val);
			// 记录被选中的列表
			this.checkedGoods = [];
			this.checkedGoods.push(...val);
			// 提交mutation
			// this.changCartChecked(this.checkedGoods);
			// console.log(this.checkedGoods);
			// 如果选中状态发生改变 选中的产品和购物车商品总列表数量对比控制选中状态
			if (val.length == 0) {
				this.checkedAll = false;
				this.isIndeterminate = false;
			} else if (val.length == this.goods.length) {
				this.checkedAll = true;
				this.isIndeterminate = false;
			} else {
				this.isIndeterminate = true;
			}
		},
		// 外部切换表格的选中状态
		toggleSelection(rows) {
			// console.log(rows);
			// console.log("外部切换表格的选中状态");
			if (rows) {
				rows.forEach((row) => {
					this.$refs.mylist.toggleRowSelection(row);
				});
			} else {
				this.$refs.mylist.clearSelection();
			}
		},
		// 获取列表
		async getCarts() {
			let res = await getCarts({ token: this.token });
			// console.log(res);
			this.goods = [];
			this.goods.push(...res);
			// 将默认选中项执行选中
			// this.$nextTick(() => {
			// 	this.toggleSelection(this.cartChecked);
			// });
		},
		// 添加数量
		handelAdd(id) {
			this.goods.forEach((g) => {
				if (g.Id == id) {
					g.count++;
				}
			});
			postAdd({
				token: this.token,
				goodId: id,
			}).then(() => {
				// 如果执行操作成功,重新请求数据
				// if (res.code == 1) {
				// 	this.getCarts();
				// }
			});
		},
		// 减少数量
		handelSub(id) {
			this.goods.forEach((g) => {
				if (g.Id == id) {
					g.count--;
				}
			});

			postSub({
				token: this.token,
				goodId: id,
			}).then(() => {
				// 如果执行操作成功,重新请求数据
				// if (res.code == 1) {
				// 	this.getCarts();
				// }
			});
		},
		// 删除商品
		handelDel(id) {
			let i = this.goods.findIndex((g) => g.Id == id);
			this.goods.splice(i, 1);
			postDel({
				token: this.token,
				goodId: id,
			}).then(() => {
				// 如果执行操作成功,重新请求数据
				// if (res.code == 1) {
				// 	this.getCarts();
				// }
			});
		},
		handelPay() {
			alert(JSON.stringify(this.checkedGoods));
		},
	},
};
</script>
<style scoped lang="scss">
.carts {
	.title {
		line-height: 100px;
	}
	.tips {
		padding: 100px;
		text-align: center;
	}
	.price {
		font-size: 20px;
		color: red;
		margin-bottom: 20px;
	}
	.counter {
		display: flex;
		line-height: 40px;
		justify-content: space-between;
		align-items: center;
		width: 120px;
		::v-deep .el-input {
			width: 42px;
		}

		i {
			font-size: 30px;
			color: #909399;
			&:hover {
				color: #a6a9ad;
			}
		}
	}
	.pay-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #ebe9f1;
		z-index: 99999;
		.main-wrap {
			display: flex;
			justify-content: space-between;
			line-height: 40px;
			height: 40px;
			padding: 10px 0;
			.total-price {
				font-size: 26px;
				color: red;
			}
		}
	}
}
</style>
